<template>
  <div>
    <div class="describe-box " v-if="richContent">
        <div class="block-tit mar-t60 pad-b20">
            产品描述
        </div>
        <div v-html="richContent"></div>

        <div class="tips-stick-out flex-center">
            <div 
                class=" mar-t16 mar-r20"
                v-for="(item, index) in tipsStickOut"
                :key="index"
            >
                {{ item.title }}
            </div>
        </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 产品描述
*/
import { ref, defineProps } from "vue"
import serviceApi from "@/api/modules/trademarkService.js"
const props = defineProps({
    service_id: {
        type: String,
        default: ""
    },
})
let tipsStickOut = ref([])
// 服务标签
const getServiceLabel = () => { 
    serviceApi.serviceLabel({
        service_id: props.service_id
    }).then(res => { 
        tipsStickOut.value = res.data
    })
}
getServiceLabel();
let richContent = ref("")
// 产品描述
const serviceDescribe = () => {
    serviceApi.serviceDescribe({
        service_id: props.service_id
    }).then(res => {
        richContent.value = res.data.content
    })
}
serviceDescribe()
</script>

<style lang="scss" scoped>
.tips-stick-out {
  font-size: 16px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: Regular;
  text-align: center;
  color: #0052d9;
}
.block-tit {
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #202020;
}
</style>